<template>
  <div>
    <el-menu
      :default-active="activerouter"
      class="el-menu-vertical"
      background-color="#304156"
      text-color="#fff"
      router
      :unique-opened="true"
      active-text-color="#50BFFF"
      :collapse="isCollapse"
      :collapse-transition="true"
    >
      <template v-for="(item,key)  in menuList">
        <template v-if="item.childMenuList.length == 0">
          <el-menu-item :key="key" :index="item.menuUrl">
            <i :class="item.menuIcon"></i>
            <span slot="title">{{item.menuName}}</span>
          </el-menu-item>
        </template>

        <template v-if="item.childMenuList.length != 0">
          <el-submenu :index=" `${key+1}` " :key="key">
            <template slot="title">
              <i :class="item.menuIcon"></i>
              <span>{{item.menuName}}</span>
            </template>

            <el-menu-item-group>
              <el-menu-item
                v-for="(menu,Num) in item.childMenuList"
                :key="Num"
                :index="menu.menuUrl"
              >{{menu.menuName}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </template>
      </template>

<!--      <template v-for="item in Menulists">-->
<!--        <template v-if="item.elchildren.length==0 ?false:true ">-->
<!--          <el-menu-item :key="item.index" :index="item.elrouter">-->
<!--            <i :class="item.elicon"></i>-->
<!--            <span slot="title">{{item.elname}}</span>-->
<!--          </el-menu-item>-->
<!--        </template>-->
<!--        <template v-if="item.elchildren.length!=0 ?true:false ">-->
<!--          <el-submenu v-for="val in item.elchildren" :key="val.index" :index="val.id">-->
<!--            <template slot="title">-->
<!--              <i :class="val.elicon"></i>-->
<!--              <span slot="title">{{val.elheader}}</span>-->
<!--            </template>-->
<!--            <template v-for="header in val.childerHeader">-->
<!--              <el-menu-item-group :key="header.index">-->
<!--                <el-menu-item :index="header.elrouter">{{header.elname}}</el-menu-item>-->
<!--              </el-menu-item-group>-->
<!--            </template>-->
<!--          </el-submenu>-->
<!--        </template>-->
<!--      </template>-->
    </el-menu>
  </div>
</template>

<script>
export default {
  props: {
    isCollapse: Boolean,
    menuList:Array,
  },
  data() {
    return {
      activerouter: "/home/index",
      Menulists:[]
      // Menulists: [
      //   {
      //     elicon: "el-icon-setting",
      //     elrouter: "/home/index",
      //     elname: "首页",
      //     elchildren: [
      //       {
      //         id: "1",
      //         elicon: "el-icon-user",
      //         elheader: "用户管理",
      //         childerHeader: [
      //           {
      //             elrouter: "/home/user",
      //             elname: "用户列表"
      //           },
      //           {
      //             elrouter: "/home/merchant",
      //             elname: "商户列表"
      //           },
      //           {
      //             elrouter: "/home/helperlist",
      //             elname: "帮手列表"
      //           }
      //         ]
      //       },
      //       {
      //         id: "2",
      //         elicon: "el-icon-s-management",
      //         elheader: "订单管理",
      //         childerHeader: [
      //           {
      //             elrouter: "/home/order",
      //             elname: "充值订单"
      //           },
      //           {
      //             elrouter: "/home/gold",
      //             elname: "金币订单"
      //           },
      //           {
      //             elrouter: "/home/petgold",
      //             elname: "宠币订单"
      //           },
      //           {
      //             elrouter: "/home/grain",
      //             elname: "口粮订单"
      //           }
      //         ]
      //       },
      //       {
      //         id: "3",
      //         elicon: "el-icon-goods",
      //         elheader: "商品管理",
      //         childerHeader: [
      //           {
      //             elrouter: "/home/commodity",
      //             elname: "礼品专区"
      //           }
      //         ]
      //       },
      //       {
      //         id: "4",
      //         elicon: "el-icon-s-check",
      //         elheader: "审核管理",
      //         childerHeader: [
      //           {
      //             elrouter: "/home/check",
      //             elname: "商家审核"
      //           },
      //           {
      //             elrouter: "/home/withdraw",
      //             elname: "提现审核"
      //           },
      //           {
      //             elrouter: "/home/helperApplicationReview",
      //             elname: "帮手申请审核"
      //           },
      //           {
      //             elrouter: "/home/reviewOfDepositReturn",
      //             elname: "保证金退还审核"
      //           }
      //         ]
      //       },
      //       {
      //         id: "5",
      //         elicon: "el-icon-document",
      //         elheader: "内容管理",
      //         childerHeader: [
      //           {
      //             elrouter: "/home/discuss",
      //             elname: "用户动态"
      //           },
      //           {
      //             elrouter: "/home/merchantList",
      //             elname: "商户动态"
      //           },
      //           {
      //             elrouter: "/home/complain",
      //             elname: "店铺投诉"
      //           },
      //           {
      //             elrouter: "/home/inform",
      //             elname: "举报管理"
      //           },
      //           {
      //             elrouter: "/home/leave",
      //             elname: "留言反馈"
      //           }
      //         ]
      //       },
      //       {
      //         id: "6",
      //         elicon: "el-icon-s-custom",
      //         elheader: "营销中心",
      //         childerHeader: [
      //           {
      //             elrouter: "/home/newTask",
      //             elname: "新手任务"
      //           },
      //           {
      //             elrouter: "/home/everydayTask",
      //             elname: "每日任务"
      //           },
      //           {
      //             elrouter: "/home/topicality",
      //             elname: "话题管理"
      //           },
      //           {
      //             elrouter: "/home/banner",
      //             elname: "Banner管理"
      //           }
      //         ]
      //       },
      //       {
      //         id: "7",
      //         elicon: "el-icon-chat-line-round",
      //         elheader: "消息管理",
      //         childerHeader: [
      //           {
      //             elrouter: "/home/message",
      //             elname: "消息推送"
      //           }
      //         ]
      //       },
      //       {
      //         id: "8",
      //         elicon: "el-icon-setting",
      //         elheader: "系统设置",
      //         childerHeader: [
      //           {
      //             elrouter: "/home/versions",
      //             elname: "版本管理"
      //           },
      //           {
      //             elrouter: "/home/role",
      //             elname: "角色管理"
      //           },
      //           {
      //             elrouter: "/home/authority",
      //             elname: "权限管理"
      //           }
      //         ]
      //       },            {
      //         id: "9",
      //         elicon: "el-icon-setting",
      //         elheader: "社区管理",
      //         childerHeader: [
      //           {
      //             elrouter: "/home/club",
      //             elname: "俱乐部管理"
      //           },
      //           {
      //             elrouter: "/home/mutualAid",
      //             elname: "帮帮互助管理"
      //           },
      //           {
      //             elrouter: "/home/questionsAndAnswers",
      //             elname: "问答管理"
      //           }
      //         ]
      //       }
      //     ]
      //   }
      // ],

    };
  },
  created() {


    // 页面手动刷新指定路由
    //获取地址栏中的路由，设置elementui中的导航栏选中状态
    // let defaultMenu = window.location.href.substr(
    //   window.location.href.indexOf("/")
    // );
    // console.log('defaultMenu',defaultMenu)
    // this.activerouter ='/home/index';
  },
  // methods: {
  //   // 打开路由
  //   handleOpen(key, keyPath) {
  //     console.log("我速度离开房间啊老师的房间", key, keyPath);
  //   },
  //   // 关闭路由
  //   handleClose(key, keyPath) {
  //     console.log("123123", key, keyPath);
  //   },
  //   // // 刷新页面路由切换
  //   // activerouter(val){
  //   //   return val
  //   // }
  // },
  watch: {
    $route: {
      handler: function(route) {
        const query = route;
        console.log("query", query);
        if (query.path==='/home/index') {
          console.log(1)
          // location.reload()
        } else {
          this.activerouter = query.path;
        }
      },
      immediate: true
    }
  }
};
</script>

<style lang="scss" scoped>
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-aside {
  // width: 60px;
  color: #333;
  border-right: 0px solid #545c64;
}
.el-menu {
  border-right: none;
  padding: none !important;
}
</style>
